<template>
    <view class="page" :class="[sPopup == 'buy' ? 'f-disabled-scoll':'']">
                <!-- 全屏加载框 -->
        <view class="m-full-loading" v-if="showLoading">
            <image src="../../static/images/loading.gif" mode="widthFix"></image>
        </view>
        <!-- 轮播图 -->
        <swiper class="g-product-pic" indicator-dots indicator-color="#fff"
            indicator-active-color="#d91111">
            <swiper-item v-for="(item, index) in data.goods_photos" :key="index">
                <image :src="item.original" mode="widthFix"></image>
            </swiper-item>
        </swiper>
        <!-- 商品详情 -->
        <view class="g-product-info">
            <view class="g-product-name">
                <view class="u-product-name">{{data.goods_name}}</view>
            </view>
            <view class="g-price">￥<text>{{data.shop_price}}</text></view>
        </view>
		
		<view class="g-buy-detail">
			<view class="g-detail-title"><text class="g-text">图文详情</text></view>
			<view class="g-detail">
				<uParse :content="content" @preview="preview"/>
			</view>
		</view>
		
        <!-- 底部 -->
        <view class="g-footer">
            <button class="g-footer-btn" @tap="showMore">
                <image :src="bIsShowMore ? '../../static/icons/more1.png' : '../../static/icons/more0.png'" mode="widthFix"></image>
                <text :style="{color: bIsShowMore ? '#d71311' : '#828080'}">更多</text>
            </button>
            <button class="g-footer-buy" @tap="openPopup" data-sign="buy">
                <view v-if="isGoodsType">发起定制</view>
				<view v-if="!isGoodsType">立即定制</view>
            </button>
        </view>

        <!-- 弹框蒙版 -->
        <view class="u-popup-mask" v-if="bIsShowMask" @touchmove.stop=""></view>
        <!-- 分享弹框 -->
        <view class="g-popup-share" @touchmove.stop="" :class="[sPopup == 'share' ? 'z-show' : '']">
            <view class="g-share-type">
                <button @tap="share('weixin','WXSceneSession')">
                    <image src="../../static/icons/wxpay.png" mode="widthFix"></image>
                    <view>微信好友</view>
                </button>
                <button @tap="share('weixin','WXSenceTimeline')">
                    <image src="../../static/icons/weixin_friend.png" mode="widthFix"></image>
                    <view>朋友圏</view>
                </button>
            </view>
            <button class="u-share-cancel" @tap="closePopup">取消</button>
        </view>
        <!-- 款式选择弹框 -->
        <view></view>
        <!-- 拼购规则弹框 -->
        <!-- 购买弹框 -->
        <view class="g-popup-buy" :class="[sPopup == 'buy' ? 'z-show' : '']">
            <view class="g-buy-info f-border1px">
                <image :src="thumb"></image>
                <view class="g-price">￥<text>{{number}}</text></view>
                <!-- <view>克数:<text>{{parseFloat(number/data.gold_price).toFixed(2)}}</text></view> -->
            </view>
            <view class="g-param-wrap">
                <view class="g-buy-number">
                    <view class="u-param-name">金额</view>
                    <view :class="[reg_way ? 'g-number-select' : 'g-number-select ios']">
                        <view class="u-mins" @tap="setNumber" data-type="mins">-</view>
                        <input style="width: 150px;" type="number" v-model="number" @blur="checkNumber">
                        <view class="u-plus" @tap="setNumber" data-type="plus">+</view>
                    </view>
                </view>
            </view>
			<view class="g-param-wrap2">
				<view class="must-box">
					<view class="attribute-box">
						<view class="attribute-set">
							<view class="attribute-type">
								期限
							</view>
							<view class="attribute-all">
								<view @tap="selTerm" v-for="(item,index) in term_list" :key="index" :data-id="item.id" :data-index="index" :class="[index == term_index ? 'attribute-one attribute-select': 'attribute-one ']">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-popup-buy">
				<button class="buyall" v-if="isGoodsType">¥{{number}}</button>
				<button @tap="buy" data-sign="protocol">立即定制</button>
			</view>
            <button class="u-buy-close" @tap="closePopup()">
                <close size="50" color="#a4a4a4"></close>
            </button>
        </view>

        <!-- 更多弹框 -->
        <view class="g-popup-more" :class="[bIsShowMore ? 'z-show' : '']" :style="{display: bIsShowMore ? 'block' : 'none'}">
            <navigator open-type="switchTab" class="f-border1px" url="/pages/jewel/index/index">
                <image src="../../static/icons/home3.png" mode="widthFix"></image>
                <text :style="{color:'#828080'}">回到主页</text>
            </navigator>
        </view>
    </view>
</template>

<script>
    import henglang from '@/common/common.js';
	import uniCountdown from '@/components/uni-countdown.vue';
	import uParse from '@/components/uParse/src/wxParse.vue';
    export default {
        data() {
            return {
                nCurrent: 0, //选项卡索引
                sPopup: '', //要显示的弹框
                bIsShowMask: false, // 是否显示蒙版
                bIsShowMore: false,
                number: 1,
				start_price:5000.00,
				increase_price:100.00,
				term_list:[],
				term_id:0,
				term_index:0,
                oSendData: {},
                oProductInfo: {},
                data: {},
                thumb: '',
                aProductPics: [],
                team_end_time: '',
                showLoading: true,
				reg_way: false,
				lottery_record:[],
				content:'正在加载中',
				isGoodsType: henglang.isGoodsTpye(),
				rule_id:'',
				userInfo:[],
				currentBuyList:[]
            };
        },
		components: {
			uniCountdown,
			uParse
		},
		computed: {
			totalPrice() {
				return (this.data.shop_price * this.number).toFixed(2)
			},
			sytotalPrice() {
				return (this.data.shop_price * this.data.sy_buy_num).toFixed(2)
			}
		},
        methods: {
			preview(src, e){
				
			},
			selTerm(e){
				let {index,id} = e.currentTarget.dataset;
				this.term_id=id;
				this.term_index=index;
			},
            toggleTab(e) { // 切换tab
                this.nCurrent = e.currentTarget.dataset.index;
            },
            share(type, wx = '') { // 调用分享
				let that = this
                let share = uni.getStorageSync('app_share');
				that.showLoading = true;
				uni.share({
                    provider: type,
                    scene: wx,
                    type: 0,
                    href: this.data.share_url + '&share_pid=' + this.userInfo.member_id,
					// href: 'http://ydt3.xunyu999.com/index/share/goods_view?goods_id=1304&promotion_id=2' + '&share_pid=' + this.userInfo.member_id,
                    title: '恒朗源来，购物超低价！',
                    summary: share.description,
                    imageUrl: share.thumb,
                    success: function(res) {
						that.showLoading = false
					},
                    fail: function(err) {
						that.showLoading = false
					}
                });
				setTimeout(() => {
					that.showLoading = false;
				}, 3000)
            },
            showMore() {
                this.bIsShowMore = !this.bIsShowMore;
            },
            selectParam(e) { // 商品参数选择
                let key = e.currentTarget.dataset.key;
                let index = e.currentTarget.dataset.index;

                this.oSendData[key] = index;
            },
            buy() { // 购买
				if(!uni.getStorageSync('token')){
					uni.navigateTo({
						url: '/pages/user/login?type=1'
					});
					return false;
				}
				let that = this;
				if(!that.checkNumber())return;
				if(!this.term_id)
					return henglang.showToast('请选择期限')
				let gram_number=parseFloat(that.number/that.data.gold_price).toFixed(2);
				let term_name='';
				let term_id=this.term_id;
				let annualized_rate=''
				this.term_list.forEach(function(item){
					if(item.id==term_id){
						term_name=item.name;
						annualized_rate=item.annualized_rate;
					}
				})
				that.sPopup = '';
				that.bIsShowMask = false;
				uni.navigateTo({
				    url: `/pages/pawn/payment?annualized_rate=${annualized_rate}&term_id=${term_id}&term_name=${term_name}&gold_price=${that.data.gold_price}&start_price=${that.start_price}&increase_price=${that.increase_price}&goods_id=${that.goods_id}&money=${that.number}`
				})
            },
            setNumber(e) { // 数量加减
                let type = e.currentTarget.dataset.type;
				this.number=parseFloat(this.number)
				if(this.increase_price==0){
					this.number = this.start_price;
					return uni.showToast({
					    icon: 'none',
					    title: '该产品指定价为'+this.start_price,
					})
					
				}
                if (type === 'mins') { // 减
                    if (this.number <= this.start_price) {
							uni.showToast({
							    icon: 'none',
							    title: '最低起步价为'+this.start_price,
							})
                        
                        return;
                    }
                    this.number = this.number-parseFloat(this.increase_price);
                } else if (type === 'plus') { // 加
                   /* if (this.number >= this.data.sy_buy_num) {
                        uni.showToast({
                            icon: 'none',
                            title: '最大购买份数' + this.data.sy_buy_num,
                        })
                        return;
                    } */
                    this.number = this.number+parseFloat(this.increase_price);
					
                }
				if(Number(this.number)%this.increase_price !== 0){
					this.number = this.start_price;
					henglang.showToast('金额必须是'+this.increase_price+'的倍数')
					return;
				}
				this.number=this.number.toFixed(2)
            },
            checkNumber() { // 校检input数量
				let that = this
				this.number=parseFloat(this.number)
				
				if(this.increase_price<=0){
					if(parseFloat(this.start_price)!=this.number){
						this.number = this.start_price;
						 uni.showToast({
							icon: 'none',
							title: '该产品指定价为'+this.start_price,
						})
					}
					return true;
				}
                if (this.number < this.start_price) {
                    this.number = this.start_price;
                    uni.showToast({
                        icon: 'none',
                        title: '最低起步价为'+this.start_price,
                    })
					return false;
                }
				if(Number(this.number)%this.increase_price !== 0){
					this.number = this.start_price;
					henglang.showToast('金额必须是'+this.increase_price+'的倍数')
					return false;
				}
                /* if (this.number > this.data.sy_buy_num) {
                    this.number = this.data.sy_buy_num;
                    uni.showToast({
                        icon: 'none',
                        title: '最大购买份数' + this.data.sy_buy_num,
                    })
                } */
                this.number = Math.floor(this.number);
				return true;
            },
            openPopup(e) {
                this.sPopup = e.currentTarget.dataset.sign;
                this.bIsShowMask = true;
                this.bIsShowMore = false;
            },
            closePopup() {
                this.sPopup = '';
                this.bIsShowMask = false;
            },
            back() {
                uni.navigateBack();
            }
			
        },
        onLoad({goods_id}) {
            let that = this;
            that.promotion_id = that.rule_id = 8 ;
            that.goods_id = goods_id;
			that.showLoading = true;
			henglang.get('Pawn_goods/getPawnGoodsBaseInfo',{promotion_id: 8,goods_id: goods_id},false,function(res){
				that.showLoading = false;
				that.data = res.data.data;
				
				that.term_list=res.data.term_list;
				if(that.term_list.length)
					that.term_id=that.term_list['0']['id']
				that.data.shop_price = that.data.shop_price.toFixed(2);
				that.number=that.start_price=that.data.start_price.toFixed(2);
				that.increase_price=that.data.increase_price.toFixed(2);
				that.thumb = that.data.goods_photos[0].original;
			});
        },
		onReady() {
		    let that = this;
		    let oProductInfo = this.oProductInfo;
		    // 商品参数选择
		    for (let key in oProductInfo) {
		        this.oSendData[key] = 0;
		    }
			uni.getSystemInfo({
			    success(res) {
			        that.reg_way = res.platform == 'android' ? true : false;
			    }
			});
			that.userInfo = uni.getStorageSync('userInfo')
		},
		onShow() {
			let that = this;
			that.showLoading = true;
			that.nCurrent = 0;
			henglang.get('goods/getGoodsContentAttr',{goods_id: that.goods_id},false,function(res){
				that.showLoading = false;
				that.content = res.data.data.goods_content;
			});
		},
        onNavigationBarButtonTap({index}) {
            if (index == 0) {
                this.sPopup = 'share',
                this.bIsShowMask = true;
                this.bIsShowMore = false;
            }
        }
    }
</script>
<style>
	@import url("../../components/uParse/src/wxParse.css");
    .page {
        padding-bottom: 96upx;
        width: 100vw;
        background: #fff;
    }
	.attribute-box{
		background: #fff;
		width: 100%;
		height: auto;
	}
	.attribute-set{
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		height: 100%;
	}
	.attribute-type{
		height: 81rpx;
		font-size: 32rpx;
		line-height: 81rpx;
	}
	.attribute-all{
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	.attribute-one{
		width: 215rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		border: 2rpx solid #b3b3b3;
		border-radius: 5rpx;
		float: left;
		margin-right: 10rpx;
		margin-bottom: 11rpx;
	}
	.attribute-one:nth-child(3n+0){
		margin-right: 0rpx !important;
	}
	.attribute-select{
		background: #fac9c9;
		color: #f55959;
		border: 2rpx solid #fac9c9;
	}
	.attribute-line{
		background: #f1f1f1;
		height: 2rpx;
		margin-top: 20rpx;
		width: 100%;
	}
    .f-disabled-scoll {
        overflow: hidden;
        height: 90vh;
		
    }
	.g-buy-item {
	    padding: 10px;
	    border-bottom: 10px solid #f3f3f3;
	}
	.g-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20upx;
		padding-left: 20upx;
		position: relative;
		font-size: 30upx;
	}
	.g-text::after {
	    content: '';
	    display: block;
	    width: 6upx;
	    height: 30upx;
	    background: #d71311;
	    position: absolute;
	    top: 50%;
		margin-top: -15upx;
	    left: 0;
	}

    .g-product-pic {
        height: 100vw
    }
    .g-product-pic image {
        width: 100%;
    }
    /* 倒计时 */
    .g-activity-time {
        color: #fff;
        background: #d61311;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
		padding-right: 20upx;
        position: relative;
    }
    .g-activity-time::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 100upx;
        width: 1px;
        height: 70%;
        background: #fff;
    }
	.g-countdown{
		display: flex;
		justify-content: center;
		align-items: center;
	}
    .g-countdown text {
		margin-right: 20upx;
    }
    .g-activity-time .u-time-pic {
        width: 74upx;
		height: 72upx;
    }
    .g-activity-time .u-share {
        width: 40upx;
        margin-right: 10px;
    }
    /* 商品信息 */
    .g-product-info {
        padding: 10px 10px 0 10px;
        border-bottom: 10px solid #f3f3f3;
        position: relative;
    }
    .u-product-sign {
        padding: 0 3px;
        color: #da1310;
        border: 1px solid #da1310;
        border-radius: 2px;
        margin-right: 5px;
        font-size: 24upx;
		display: inline-block;
		vertical-align: middle;
		margin-top: -8upx;
    }
    .u-product-name {
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 32upx;
    }
    .g-price {
        color: #d8120f;
        font-size: 24upx;
        margin: 5px 0;
    }
    .g-price text {
        font-size: 30px;
    }
    .g-progress {
        display: flex;
        align-items: center;
    }
    .g-progress-line {
        flex: 1;
        height: 20upx;
        border-radius: 100px;
        background: #fed0d0;
    }
    .g-progress-line view {
        border-radius: 100px;
        background: #d61311;
        height: 100%;
    }
    .g-progress text {
        margin-left: 10px;
        color: #d61311;
    }
    .g-product-sell {
        display: flex;
        justify-content: space-between;
        color: #828080;
        font-size: 24upx;
        margin-bottom: 20upx;
    }
    .g-buy-follow>image {
        width: 90%;
        display: block;
        margin: 0 auto;
    }
	/* 当期购买人数 */
	.g-buy-person{
		border-bottom: 10px solid #f3f3f3;
	}
	.g-buy-person .g-text{
		position: relative;
	}
	.g-buy-person .tou-list{
		text-align: right;
		margin-right: 29upx;
		position: absolute;
		top: 23upx;
		right: 0upx;
	}
	.g-buy-person .tou-list image{
		width: 57upx;
		height: 57upx;
		border: 1px solid #ffffff;
		background: #000000;
		border-radius: 50px;
		overflow: hidden;
		position: absolute;
		top: 50%;
		margin-top: -29upx;
	}
	.g-buy-person .item{
		width: 698upx;
		margin: 0 auto;
		border-bottom: 1px solid #d2d2d2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 22upx 0;
	}
	.g-buy-person .item:last-child{
		border-bottom: 0;
	}
	.g-buy-person .item .left{
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 40upx;
		font-size: 30upx;
	}
	.g-buy-person .item .left .name{
		font-size: 34upx;
		max-width: 290upx;
	}
	.g-buy-person .item .right{
		text-align: right;
	}
	.g-buy-person .item .right .time{
		color: #9b9a9a;
		font-size: 26upx;
	}
	.g-buy-person .item .right .num{
		color: #d71311;
		font-size: 30upx;
	}
	.g-buy-person .item .pic{
		width: 96upx;
		height: 96upx;
		overflow: hidden;
		margin-right: 20upx;
		border-radius: 50px;
		background: #F0F0F0;
	}
	.g-buy-person .item .pic image{
		width: 96upx;
		height: 96upx;
		border-radius: 50px;
		overflow: hidden;
	}
    /* 详情 */
    .g-tab-btns {
        display: flex;
        text-align: center;
        position: relative;
    }
    .g-tab-btns view {
        flex: 1;
        position: relative;
        z-index: 2;
		height: 80upx;
		line-height: 80upx;
    }
    .g-tab-btns .act::after {
        content: '';
        display: block;
        width: 55upx;
        height: 3px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #d71311;
    }
    .g-tab-btns::after {
        border-bottom: 1px solid #ccc;
    }
    /* 以往记录 */
    .g-record {
        padding: 10px;
    }
    .g-record-item {
        margin-bottom: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    }
    .u-record-time {
        padding: 2px 0 2px 10px;
        font-size: 24upx;
        background: #e9e9e9;
    }
    .g-record .g-user-info {
        padding: 10px;
        display: flex;
        align-items: center;
    }
    .g-record .g-user-info image {
        width: 80upx;
        height: 80upx;
        border-radius: 100px;
        margin-right: 10px;
    }
    
	.g-buy-detail .g-detail-title{
		padding: 20upx;
		padding-bottom: 0;
	}
    /* 底部 */
    .g-footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        display: flex;
        color: #ccc;
        height: 108upx;
        z-index: 50;
    }

    .g-footer-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 130upx;
    }

    .g-footer-btn image {
        width: 40upx;
    }

    .g-footer-price {
        font-size: 12px;
    }

    .g-footer-price text {
        font-size: 28upx;
    }

    .g-footer-buy {
        flex: 1;
        background: #d71311;
        color: #fff;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .u-popup-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .5);
        z-index: 50;
        transition: .3s;
    }

    .z-show {
        transform: translateY(0) !important;
    }

    /* 分享弹框 */
	.m-full-loading{
		z-index: 54;
	}
    .g-popup-share {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        transform: translateY(100%);
        transition: .3s;
		z-index: 53;
    }

    .g-popup-share .g-share-type {
        display: flex;
        padding: 15px 0;
    }

    .g-popup-share .g-share-type button {
        flex: 1;
        text-align: center;
    }

    .g-popup-share .g-share-type image {
        width: 75upx;
		height: 75upx;
    }

    .g-popup-share .u-share-cancel {
        background: #a4a4a4;
        padding: 10px 0;
        color: #fff;

    }

    /* 规则弹框 */
    .g-popup-rule {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        border-radius: 5px;
        width: 70%;
        padding: 20px;
        z-index: 53;
        transition: .3s;
    }

    .g-popup-rule>view {
        padding-left: 10px;
        margin-bottom: 10px;
    }

    .g-popup-rule text {
        display: block;
    }

    .g-popup-rule::after {
        content: '';
        display: block;
        width: 3px;
        height: 15px;
        background: #d71311;
        position: absolute;
        top: 21px;
        left: 10px;
    }

    .g-popup-rule .g-popup-close {
        padding: 5px;
        border-radius: 100px;
        border: 3px solid #fff;
        position: absolute;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 购买弹框 */
    .g-popup-buy {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        z-index: 11;
        padding: 10px;
        box-sizing: border-box;
        padding-bottom: 60px;
        transform: translateY(150%);
        transition: .3s;
		z-index: 51;
    }
    .g-popup-buy .g-number-select {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-between;
		border: 1px solid #A4A4A4;
		border-radius: 10upx;
		position: relative;
    }
    .g-popup-buy .g-number-select > view {
        color: #3e3e3e;
        font-size: 42upx;
        font-weight: bold;
		width: 90upx;
		height: 66upx;
		line-height: 66upx;
    }
	.g-popup-buy .g-number-select.ios > view {
		line-height: 60upx;
	}
    .g-popup-buy .g-number-select input {
	   width: 100upx;
    }
	.g-popup-buy .g-number-select:after{
		content: '';
		position: absolute;
		left: 90upx;
		top: 0;
		height: 66upx;
		background: #A4A4A4;
		width: 1px;
	}
	.g-popup-buy .g-number-select:before{
		content: '';
		position: absolute;
		right: 90upx;
		top: 0;
		height: 66upx;
		background: #A4A4A4;
		width: 1px;
	}
	.g-popup-buy .u-plus{
		color: #ffffff !important;
		position: relative;
		z-index: 1;
	}
    .g-popup-buy .u-plus:after{
		content: '';
		position: absolute;
		width: 94upx;
		height: 70upx;
		background: #d71311;
		top: -4upx;
		left: -4upx;
		z-index: -1;
		border-radius: 0 10upx 10upx 0;
    }
	.g-popup-buy .ios .u-plus:after{
		top: -2upx;
		left: -2upx;
	}
    .g-popup-buy .g-buy-number {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40upx;
    }
	
	.g-buy-all{
		padding-top: 20upx;
		text-align: right;
	}

    .g-buy-info {
        padding: 10px 0 60upx 292upx;
        position: relative;
    }

    .g-buy-info .g-price text {
        font-size: 40upx;
    }

    .g-buy-info::after {
        border-bottom: 1px solid #ccc;
    }

    .g-buy-info image {
        width: 230upx;
        height: 230upx;
        padding: 5px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 10px;
        transform: translateY(-30%);
    }

    .g-buy-param {
        margin: 10px 0;
    }

    .g-buy-param .u-param-item {
        display: inline-block;
        margin: 8px 0px 0 12px;
        padding: 2px 6px;
        border-radius: 3px;
        background: #e9e9e9;
        transition: .3s;
    }

    .g-buy-param .act {
        color: #fff;
        background: #d71311;
    }

    .g-param-wrap {
        overflow: auto;
        height: 13vh;
    }
	.g-param-wrap2 {
        overflow: auto;
        height: 21vh;
    }
    .u-popup-buy {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #d71311;
        color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
    }
	.u-popup-buy button{
		flex: 1;
		padding: 15px 0;
	}
	.u-popup-buy button.buyall{
		background: #ffffff;
		color: #d71311;
		border-top: 2upx solid #d71311;
		border-bottom: 2upx solid #d71311;
	}
    .u-buy-close {
        position: absolute;
        z-index: 9;
        top: 12px;
        right: 12px;
    }

    /* 更多弹框 */
    .g-popup-more {
        position: fixed;
        left: 20upx;
        bottom: 160upx;
        background: #fff;
        padding: 10px;
        border-radius: 5px;
        color: #fff;
        z-index: 8;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        transform: translateY(50vw);
        transition: .3s;
        display: none;
    }

    .g-popup-more::after {
        content: '';
        display: block;
        background: #fff;
        width: 15px;
        height: 15px;
        position: absolute;
        left: 20px;
        bottom: 0;
        transform: translateY(50%) rotate(45deg);
        box-shadow: 6px 5px 8px rgba(0, 0, 0, 0.1);
    }

    .g-popup-more>navigator {
        display: flex;
        align-items: center;
        color: #ccc;
        position: relative;
    }

    .g-popup-more>navigator:nth-child(1) {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .g-popup-more>navigator:nth-child(1)::after {
        border-bottom: 1px solid #ccc;
    }

    .g-popup-more image {
        width: 40upx;
        margin-right: 10px;
    }
	

</style>
